<template>
  <div>
    <!-- {{ isform }} -->
    <q-form class="dialog_card column" ref="editRef">
      <div class="row q-col-gutter-x-md dialog_form q-pa-md">
        <div class="col-6">
          <h5>
            <q-icon name="star" color="red" />{{
              isform.is_btn == 0 ? '菜单名称：' : '按钮名称：'
            }}
          </h5>
          <q-input
            lazy-rules
            :rules="[(val) => (val && val.length > 0) || '请输入角色名称']"
            outlined
            dense
            v-model="isform.name"
            type="text"
            clearable
          />
        </div>
        <div class="col-6" v-if="isform.is_btn != 1 && isform.is_menu == 1">
          <h5>菜单图标：</h5>
          <q-input outlined dense v-model="isform.icon">
            <template #prepend>
              <q-icon :name="isform.icon" color="t-grey" />
            </template>
            <template #append>
              <q-btn round dense flat icon="search" color="primary">
                <q-menu>
                  <q-btn
                    round
                    dense
                    flat
                    v-for="v in icons"
                    :key="v"
                    :icon="v"
                    color="t-grey"
                    @click="isform.icon = v"
                  />
                </q-menu>
              </q-btn>
            </template>
          </q-input>
        </div>

        <div class="col-6" v-if="isform.id">
          <h5>父级菜单：</h5>
          <!-- {{ options }} -->
          <q-select
            outlined
            dense
            v-model="isform.pid"
            option-value="id"
            option-label="name"
            :options="options"
            emit-value
            map-options
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey"> No results </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
        <div class="col-6">
          <h5><q-icon name="star" color="red" />菜单排序：</h5>
          <q-input
            lazy-rules
            :rules="[(val) => (val && val > 0) || '请输入大于0的排序']"
            outlined
            dense
            v-model.number="isform.sort"
            type="number"
            clearable
          />
        </div>
        <div class="col-6">
          <h5>接口路由：</h5>
          <q-input
            outlined
            dense
            v-model="isform.api_path"
            type="text"
            clearable
          />
        </div>
        <div class="col-6">
          <h5>{{ isform.is_btn == 0 ? '页面路由：' : '按钮唯一标识：' }}</h5>
          <q-input
            outlined
            dense
            v-model="isform.view_path"
            type="text"
            clearable
          />
        </div>
        <div class="row col-12">
          <div class="col-6">
            <h5><q-icon name="star" color="red" />是否是菜单路由：</h5>
            <q-btn-toggle
              class="q_b_toggle"
              v-model="isform.is_menu"
              :options="[
                { label: '菜单', value: 1 },
                { label: '非菜单', value: 0 },
              ]"
            />
          </div>
          <div class="col-6">
            <h5><q-icon name="star" color="red" />是否显示：</h5>
            <q-btn-toggle
              class="q_b_toggle"
              v-model="isform.status"
              :options="[
                { label: '显示', value: 1 },
                { label: '隐藏', value: 0 },
              ]"
            />
          </div>
        </div>

        <div class="row col-12">
          <div class="col-6">
            <h5><q-icon name="star" color="red" />是否是按钮：</h5>
            <q-btn-toggle
              class="q_b_toggle"
              v-model="isform.is_btn"
              :options="[
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ]"
            />
          </div>
        </div>
      </div>
    </q-form>
  </div>
</template>

<script lang="ts" setup>
import emitter from '@/components/eventbus';
import { powerAdd, updatePower } from '@/api/basic';
import { useQuasar } from 'quasar';
import { getter } from './icon';

interface Props {
  form: {
    name?: string;
    api_path?: string;
    view_path?: string;
    sort?: number;
    status?: number;
    is_btn?: number;
    is_menu?: number;
    pid?: number;
    id?: number;
    icon?: any;
  };
  useroptions: [];
}
const props = withDefaults(defineProps<Props>(), {
  form: () => ({}),
  useroptions: () => [],
});
const editRef = ref();
const $q = useQuasar();
const icons = getter('icon');

//接收兄弟组件传递事件
emitter.on('saveData', async () => {
  console.log('saveDatasaveData');
  IsValidate();
});
//表单验证
const IsValidate = () => {
  if (editRef.value) {
    editRef.value.validate().then(async function (validate: any) {
      if (validate) {
        console.log('验证通过');
        onSubmit();
      } else {
        console.log('验证不通过');
      }
    });
  }
};
//提交数据
const onSubmit = async () => {
  if (isform.value.id) {
    const res: any = await updatePower(isform.value);
    info(res);
    console.log('编辑路由111', res);
  } else {
    const res: any = await powerAdd(isform.value);
    info(res);
    console.log('新建路由111', res);
  }
};
//信息返回
const info = (res: any) => {
  if (res.code == 200) {
    $q.notify({
      color: 'white',
      textColor: 'positive',
      icon: 'check_circle',
      position: 'top',
      message: res.msg,
    });
    emit('backList');
  }
};

const emit = defineEmits(['update:form', 'backList']);

const isform: any = computed({
  set(value: any) {
    // emit('update:form', value);
  },
  get() {
    console.log('props.form', props.form);
    return props.form;
  },
});

const options: any = computed({
  set(value: any) {
    // emit('update:form', value);
  },
  get() {
    console.log('props.useroptions', props.useroptions);
    const list: any = [];
    if (props.useroptions) {
      props.useroptions.forEach((item: any) => {
        const Root = JSON.parse(JSON.stringify(item));
        const queue = [];
        queue.push(Root);
        while (queue.length) {
          const node: any = queue.shift();
          if (node.children && node.children.length) {
            queue.push(...node.children);
          }
          delete node.children;
          if (node.pid !== null && node.pid !== undefined) {
            list.push(node);
          }
        }
      });
    }
    const islist = list.filter(
      (item: any, index: any) =>
        item.is_menu !== 0 &&
        item.id !== props.form.id &&
        item.pid !== props.form.id
    );
    islist.unshift({ id: 0, pid: 0, name: '顶级菜单', is_menu: 1 });
    console.log('props.useroptions1111111111', islist);

    return islist;
  },
});
</script>
<style scoped lang="scss"></style>
